<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="0">
  <title></title>
</head>
<style>
  html, body, * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-size: 14px;
  }
  #root {
    position: absolute;
    inset: 0;
    /* background-image: url('./pg.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat; */
  }
  .bg {
    inset: 0;
    position: absolute;
    overflow: hidden;
    .title {
      position: absolute;
      top: 24px;
      width: 100%;
      padding: 0 24px;
      display: flex;
      justify-content: space-between;
      img {
        height: 45px;
        user-select: none;
      }
      .fullScreen {
        cursor: pointer;
        display: flex;
        align-items: center;
        color: #ccc;
        font-size: 16px;
        position: absolute;
        right: 20px;
        top: 20px;
        z-index: 20;
        img {
          height: 16px;
          margin-right: 10px;
        }
        span {
          margin-top: -1px;
        }
      }
    }
  }
</style>
<script>
  const elIsFullScreen = () => {
    return Boolean(document.fullscreenElement) || false;
  };
  function fullScreenChange () {
  if (elIsFullScreen()) {
    document.exitFullscreen();
    document.getElementById('fullScreen').innerText = '全屏';
    return false;
  } else {
    document.body.requestFullscreen();
    document.getElementById('fullScreen').innerText = '取消全屏';
    return true;
  }
}
</script>
<body>
  <div class="bg">
    <canvas id="c"></canvas>
    <div class="title">
      <div>
        <!-- <img src="/images/logo.png" /> -->
      </div>
      <div class="fullScreen" onclick="fullScreenChange()">
        <img src="/images/fullScreen.png" />
        <span id="fullScreen">全屏</span>
      </div>
    </div>
  </div>
  <div id="root"></div>
</body>
<!-- <script src="/index.js" type="module"></script> -->
<script src="./bg.js" type="module"></script>
<script src="./echartsDemo.js" type="module"></script>
</html>